<template>
	<ComPop
		v-model="visible"
		width="30%"
		title="增加准驾车辆"
		@saveSubmit="saveProSubmit"
	>
		<div class="mb-2">已添加准驾车辆：</div>
		<div class="mb-2">
			<el-tag
				v-for="car in boundVehicles"
				:key="car"
				class="mr-2 mb-2"
				type="info"
				effect="plain"
			>
				{{ car }}
			</el-tag>
		</div>
		<el-form>
			<el-form-item label="选择车辆：">
				<el-select
					v-model="selectedVehicles"
					filterable
					multiple
					placeholder="请输入车牌号搜索"
					style="width: 100%"
				>
					<el-option
						v-for="item in vehicleOptions"
						:key="item"
						:label="item"
						:value="item"
					/>
				</el-select>
			</el-form-item>
		</el-form>
	</ComPop>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const visible = ref(false);
const boundVehicles = ref<string[]>([]); // 已绑定车辆
const selectedVehicles = ref<string[]>([]); // 选择车辆
const vehicleOptions = ref<string[]>([]); // 可选车辆
let allVehicles: string[] = [];

function open(bound: string[], allVehicles: string[]) {
	visible.value = true;
	boundVehicles.value = bound;
	selectedVehicles.value = [];
	vehicleOptions.value = allVehicles;
}
function queryVehicles(query: string) {
	if (!query) {
		vehicleOptions.value = allVehicles;
	} else {
		vehicleOptions.value = allVehicles.filter((v) => v.includes(query));
	}
}
console.log(queryVehicles);
function saveProSubmit() {
	// TODO: emit 选中的车辆
	visible.value = false;
}
defineExpose({ open });
</script>
<style scoped>
.mb-2 {
	margin-bottom: 12px;
}
.mr-2 {
	margin-right: 8px;
}
</style>
